<template>
  <div class="rightMsg">
    <div class="flex1">
      <el-tabs v-model="activeName" type="border-card" style="margin-top:0px!important">
        <el-tab-pane name="1">
          <span slot="label" style="width:50%">
            <i class="el-icon-bell"></i> 生产报警
          </span>
          <div class="flex1 flexColumn" style="overflow: auto; width:100%; height:330px;">
            <div
              v-for="(item, index) in alermFile"
              :key="'alarmList' + index"
              class="itemBox finger"
              @click="alarmWindow(item)"
            >
              <div class="itemtop relative">
                <span class="round bg-red"></span>
                <div style="display:block;width:100%">【{{ item.alertTypeName }}】</div>
                <div style="display:block" class="color-red">{{ item.alertTitle }}</div>
              </div>
              <div class="itemBottom">
                <span class="color-red">{{ item.status }}</span>
                <span>{{ item.alertCreateTime}}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2">
          <span slot="label">
            <i class="el-icon-info"></i> 实时内容
          </span>
          <div class="flex1 flexColumn" style="overflow: auto;height:330px;">
            <div v-for="(item, index) in realTimeList" :key="'alarmList' + index" class="itemBox">
              <div class="itemtop flex relative">
                <span class="round bg-blue"></span>
                <span>【{{ item.type }}】</span>
                <span class="color-blue">{{ item.title }}</span>
              </div>
              <div class="itemBottom flex">
                <span class="color-blue">{{ item.status }}</span>
                <!-- <span>{{ util.timeFormat2(item.time) }}</span> -->
                <span>{{item.time}}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 弹窗 -->
    <alarmWindowBox v-show="isShow" @parentMethod="parentMethod()"></alarmWindowBox>
  </div>
</template>

<script>
import alarmWindowBox from '@/views/home/BoardPage/RunBoard/alarmWindowBox'
import { getAlertTypeName } from '@/api/home/home'

export default {
  name: 'runborder',
  components: {
    alarmWindowBox,
  },
  data() {
    return {
      activeName: '1',
      isShow: false,
      alermFile: [], //报警
      realTimeList: [
        {
          type: '生产',
          title: 'SMT-L4 上扳机 备料到达',
          status: '5%',
          time: '08-30 13:35:15',
        },
      ],
    }
  },
  created() {
    this.almList()
  },
  mounted() {},
  computed: {},
  methods: {
    alarmWindow(item) {
      console.log(item)
      this.isShow = true
    },
    parentMethod() {
      this.isShow = false
    },
    //生产报警
    almList() {
      let self = this
      let params = Object.assign({
        alertTypeNames: '2',
      })
      getAlertTypeName(params).then((res) => {
        if (res.code == 200) {
          self.alermFile = res.data
        } else {
          self.$message.warning(res.msg)
        }
      })
    },
  },
  watch: {},
}
</script>

<style lang="less" scopted>
.rightMsg {
  background-color: #fff;
  .itemBox {
    margin-top: 10px;
    height: 80px;
    padding-left: 30px;
    .itemBottom {
      padding: 0 10px;
      text-align: right;
      justify-content: space-between;
    }
  }
  .el-tabs__item {
    width: 50% !important;
  }
}
</style>